<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <div class="header-left">
        <div class="header-title">
          <h2>数据概览</h2>
          <span class="update-time">最后更新：{{ currentTime }}</span>
        </div>
      </div>
      <div class="header-actions">
        <el-button type="primary" circle @click="refreshData" icon="Refresh" />
      </div>
    </div>

    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(item, index) in chartItems" :key="index">
        <div class="chart-item" :class="{ loading: item.loading, 'ranking-item': item.title === '热情联络榜' || item.title === '积极拓展榜' }">
          <div class="chart-header">
            <h3>{{ item.title }}</h3>
            <div class="chart-filters">
              <template v-if="item.showFilters !== false">
                <div class="filter-tabs">
                  <div class="time-tabs">
                    <div
                      class="tab-item"
                      :class="{ active: item.timeFilter === 'w' }"
                      @click="
                        () => {
                          item.timeFilter = 'w';
                          handleFilterChange(item);
                        }
                      "
                    >
                      周
                    </div>
                    <div
                      class="tab-item"
                      :class="{ active: item.timeFilter === 'm' }"
                      @click="
                        () => {
                          item.timeFilter = 'm';
                          handleFilterChange(item);
                        }
                      "
                    >
                      月
                    </div>
                  </div>
                  <div class="scope-tabs">
                    <div
                      class="tab-item"
                      :class="{ active: item.scopeFilter === '1' }"
                      @click="
                        () => {
                          item.scopeFilter = '1';
                          handleFilterChange(item);
                        }
                      "
                    >
                      个人
                    </div>
                    <div
                      class="tab-item"
                      :class="{ active: item.scopeFilter === '2' }"
                      @click="
                        () => {
                          item.scopeFilter = '2';
                          handleFilterChange(item);
                        }
                      "
                    >
                      团队
                    </div>
                  </div>
                </div>
              </template>
              <el-tooltip :content="item.description" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
          <div v-if="item.title === '热情联络榜' || item.title === '积极拓展榜'">
            <div class="table-container">
              <el-table :data="item.tableData" :show-header="false" class="ranking-table" :class="{ loading: item.loading }">
                <el-table-column width="60">
                  <template #default="{ $index }">
                    <div
                      class="rank-number"
                      :class="{
                        'rank-first': $index === 0,
                        'rank-second': $index === 1,
                        'rank-third': $index === 2
                      }"
                    >
                      {{ $index + 1 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template #default="{ row, $index }">
                    <div class="user-info">
                      <span class="user-name">{{ row.name }}</span>
                      <div class="employee-info">
                        <!-- 第一个员工显示头像 -->
                        <div v-if="$index === 0 && row.employeeAvatar" class="employee-avatar">
                          <el-tooltip :content="row.employeeName" placement="top">
                            <el-avatar :size="40" :src="row.employeeAvatar" class="avatar-item employee-avatar-item" />
                          </el-tooltip>
                        </div>
                      </div>

                      <div class="avatar-group" :class="{ 'avatar-group-stacked': row.avatars.length > 10 }">
                        <div v-for="(avatar, index) in row.avatars" :key="index" class="avatar-wrapper">
                          <el-tooltip :content="row.avatarNames?.[index] || `成员${index + 1}`" placement="top">
                            <el-avatar :size="40" :src="avatar" class="avatar-item" />
                          </el-tooltip>
                          <span v-if="!(row.avatars.length > 10)" class="avatar-name">
                            {{ row.avatarNames?.[index] || `成员${index + 1}` }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="100" align="right">
                  <template #default="{ row }">
                    <span class="score">{{ row.value }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <v-chart v-else class="chart" :option="item.option" autoresize />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import { Refresh, QuestionFilled } from '@element-plus/icons-vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent } from 'echarts/components';
import {
  getLabelConsultationTop,
  getMessagesConsultationTop,
  getMessagesAddTop,
  getCustomerAddTop,
  getMessagesAdditionTrend,
  getCustomerAdditionTrend
} from '@/api/home';
import { useUserStore } from '@/store/modules/user';

use([CanvasRenderer, LineChart, BarChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent]);

const currentTime = ref(new Date().toLocaleString());
let timer: NodeJS.Timer | null = null;

interface TableData {
  name: string;
  value: number;
  avatars: string[];
  avatarNames?: string[];
}

interface ChartItem {
  title: string;
  description: string;
  option: any;
  timeFilter: 'w' | 'm';
  scopeFilter: '1' | '2';
  showFilters: boolean;
  loading: boolean;
  tableData?: TableData[];
}

const userStore = useUserStore();

// 客户新增趋势
const newCustomerOption = ref({
  title: {
    text: '',
    left: 'center',
    top: 10,
    textStyle: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#409EFF',
      textShadow: '0 2px 4px rgba(64,158,255,0.2)'
    }
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderColor: '#eee',
    borderWidth: 1,
    padding: [8, 12],
    textStyle: {
      color: '#666',
      fontSize: 13
    },
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#409EFF',
        width: 1,
        type: 'dashed'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: '#E4E7ED'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#909399',
      fontSize: 12
    }
  },
  yAxis: {
    type: 'value',
    name: '单位/人',
    nameTextStyle: {
      color: '#909399',
      fontSize: 12,
      padding: [0, 0, 0, 0]
    },
    splitLine: {
      lineStyle: {
        color: '#E4E7ED',
        type: 'dashed'
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#909399',
      fontSize: 12
    }
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#409EFF',
        borderWidth: 2,
        borderColor: '#fff',
        shadowColor: 'rgba(64,158,255,0.3)',
        shadowBlur: 10
      },
      lineStyle: {
        width: 3,
        color: '#409EFF',
        shadowColor: 'rgba(64,158,255,0.3)',
        shadowBlur: 10
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(64,158,255,0.3)'
            },
            {
              offset: 1,
              color: 'rgba(64,158,255,0.1)'
            }
          ]
        }
      }
    }
  ]
});

// 会话热度趋势
const sessionHeatOption = ref({
  title: {
    text: '',
    left: 'center',
    top: 10,
    textStyle: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#67C23A',
      textShadow: '0 2px 4px rgba(103,194,58,0.2)'
    }
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderColor: '#eee',
    borderWidth: 1,
    padding: [8, 12],
    textStyle: {
      color: '#666',
      fontSize: 13
    },
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#67C23A',
        width: 1,
        type: 'dashed'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: '#E4E7ED'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#909399',
      fontSize: 12
    }
  },
  yAxis: {
    type: 'value',
    name: '单位/条',
    nameTextStyle: {
      color: '#909399',
      fontSize: 12,
      padding: [0, 0, 0, 0]
    },
    splitLine: {
      lineStyle: {
        color: '#E4E7ED',
        type: 'dashed'
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#909399',
      fontSize: 12
    }
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#67C23A',
        borderWidth: 2,
        borderColor: '#fff',
        shadowColor: 'rgba(103,194,58,0.3)',
        shadowBlur: 10
      },
      lineStyle: {
        width: 3,
        color: '#67C23A',
        shadowColor: 'rgba(103,194,58,0.3)',
        shadowBlur: 10
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(103,194,58,0.3)'
            },
            {
              offset: 1,
              color: 'rgba(103,194,58,0.1)'
            }
          ]
        }
      }
    }
  ]
});

// 客户咨询榜
const consultationOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderColor: '#eee',
    borderWidth: 1,
    padding: [8, 12],
    textStyle: {
      color: '#666',
      fontSize: 13
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#909399',
      fontSize: 12
    },
    splitLine: {
      lineStyle: {
        color: '#E4E7ED',
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'category',
    name: '单位/条',
    nameTextStyle: {
      color: '#909399',
      fontSize: 12,
      padding: [0, 0, 0, 0]
    },
    data: [],
    axisLine: {
      lineStyle: {
        color: '#E4E7ED'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#909399',
      fontSize: 12,
      margin: 16
    }
  },
  series: [
    {
      data: [],
      type: 'bar',
      barWidth: 12,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#409EFF'
            },
            {
              offset: 1,
              color: '#67C23A'
            }
          ]
        },
        borderRadius: [0, 4, 4, 0]
      },
      label: {
        show: true,
        position: 'right',
        color: '#606266',
        fontSize: 12,
        formatter: '{c}'
      }
    }
  ]
});

// 客户关键词
const keywordOption = ref({
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#eee',
    borderWidth: 1,
    textStyle: {
      color: '#666'
    }
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      center: ['40%', '50%'],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

const chartItems = ref<ChartItem[]>([
  {
    title: '客户新增趋势',
    description: '展示每日新增客户数量变化趋势',
    option: newCustomerOption.value,
    timeFilter: 'm',
    scopeFilter: '2',
    showFilters: true,
    loading: false
  },
  {
    title: '会话热度趋势',
    description: '展示每日会话活跃度变化趋势',
    option: sessionHeatOption.value,
    timeFilter: 'm',
    scopeFilter: '2',
    showFilters: true,
    loading: false
  },
  {
    title: '客户咨询榜',
    description: '展示客户咨询量排名',
    option: consultationOption.value,
    timeFilter: 'm',
    scopeFilter: '2',
    showFilters: true,
    loading: false
  },
  {
    title: '客户关键词',
    description: '展示客户咨询关键词分布',
    option: keywordOption.value,
    timeFilter: 'm',
    scopeFilter: '2',
    showFilters: false,
    loading: false
  },
  {
    title: '热情联络榜',
    description: '展示员工联络客户活跃度排名',
    option: null,
    timeFilter: 'm',
    scopeFilter: '2',
    showFilters: true,
    loading: false,
    tableData: []
  },
  {
    title: '积极拓展榜',
    description: '展示销售拓展业绩排名',
    option: null,
    timeFilter: 'm',
    scopeFilter: '2',
    showFilters: true,
    loading: false,
    tableData: []
  }
]);

// 获取用户ID
const getUserId = () => {
  const msgprofile = JSON.parse(localStorage.getItem('msgprofile') || '{}');
  return msgprofile?.wx_id || '';
};

const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
const account = userInfo.username || '';

// 获取客户新增趋势数据
const fetchCustomerAdditionTrend = async (timeFilter: string, scopeFilter: string) => {
  const item = chartItems.value.find((item) => item.title === '客户新增趋势');
  if (item) item.loading = true;
  try {
    const res = await getCustomerAdditionTrend({
      userId: getUserId(),
      accountType: userStore.tenantId,
      type: scopeFilter,
      cycle: timeFilter,
      account
    });
    if (res.data) {
      // 更新总数
      newCustomerOption.value.title.text = `${res.data.sum}人`;
      // 转换数据格式
      const dates = res.data.data.map((item: any) => item.time);
      const values = res.data.data.map((item: any) => item.number);

      newCustomerOption.value.xAxis.data = dates;
      newCustomerOption.value.series[0].data = values;
    }
  } catch (error) {
    console.error('获取客户新增趋势失败:', error);
  } finally {
    if (item) item.loading = false;
  }
};

// 获取会话热度趋势数据
const fetchMessagesAdditionTrend = async (timeFilter: string, scopeFilter: string) => {
  const item = chartItems.value.find((item) => item.title === '会话热度趋势');
  if (item) item.loading = true;
  try {
    const res = await getMessagesAdditionTrend({
      userId: getUserId(),
      accountType: userStore.tenantId,
      type: scopeFilter,
      cycle: timeFilter,
      account
    });
    if (res.data) {
      // 更新总数
      sessionHeatOption.value.title.text = `${res.data.sum}条`;
      // 转换数据格式
      const dates = res.data.data.map((item: any) => item.time);
      const values = res.data.data.map((item: any) => item.number);

      sessionHeatOption.value.xAxis.data = dates;
      sessionHeatOption.value.series[0].data = values;
    }
  } catch (error) {
    console.error('获取会话热度趋势失败:', error);
  } finally {
    if (item) item.loading = false;
  }
};

// 获取客户咨询榜数据
const fetchMessagesConsultationTop = async (timeFilter: string, scopeFilter: string) => {
  const item = chartItems.value.find((item) => item.title === '客户咨询榜');
  if (item) item.loading = true;
  try {
    const res = await getMessagesConsultationTop({
      userId: getUserId(),
      accountType: userStore.tenantId,
      type: scopeFilter,
      cycle: timeFilter,
      account
    });
    if (res.data) {
      // 转换数据格式
      const names = res.data.map((item: any) => item.name);
      const values = res.data.map((item: any) => item.number);

      consultationOption.value.yAxis.data = names;
      consultationOption.value.series[0].data = values;
    }
  } catch (error) {
    console.error('获取客户咨询榜失败:', error);
  } finally {
    if (item) item.loading = false;
  }
};

// 获取客户关键词数据
const fetchLabelConsultationTop = async () => {
  const item = chartItems.value.find((item) => item.title === '客户关键词');
  if (!item) return;
  item.loading = true;
  try {
    const res = await getLabelConsultationTop({
      userId: getUserId(),
      account,
      type: chartItems.value[0].scopeFilter,
      accountType: userStore.tenantId
    });
    if (res.data) {
      keywordOption.value.series[0].data = res.data.map((item: any) => ({
        name: item.name,
        value: item.num
      }));
    }
  } catch (error) {
    console.error('获取客户关键词失败:', error);
  } finally {
    item.loading = false;
  }
};

// 获取热情联络榜数据
const fetchMessagesAddTop = async (timeFilter: string, scopeFilter: string) => {
  const item = chartItems.value.find((item) => item.title === '热情联络榜');
  if (!item) return;
  item.loading = true;
  try {
    const res = await getMessagesAddTop({
      userId: getUserId(),
      accountType: userStore.tenantId,
      type: scopeFilter,
      cycle: timeFilter,
      account
    });
    if (res.data) {
      item.tableData = res.data.map((item: any, index: number) => {
        // 为第一个员工添加头像信息
        const employeeAvatar = index === 0 ? item.url : null;
        const employeeName = index === 0 ? item.name : null;

        return {
          name: item.name,
          value: item.number + '条',
          avatars: item.customerListMaps.map((customer: any) => customer.customerUrl),
          avatarNames: item.customerListMaps.map((customer: any) => customer.customerName),
          employeeAvatar,
          employeeName
        };
      });
    }
  } catch (error) {
    console.error('获取热情联络榜失败:', error);
  } finally {
    item.loading = false;
  }
};

// 获取积极拓展榜数据
const fetchCustomerAddTop = async (timeFilter: string, scopeFilter: string) => {
  const item = chartItems.value.find((item) => item.title === '积极拓展榜');
  if (!item) return;
  item.loading = true;
  try {
    const res = await getCustomerAddTop({
      userId: getUserId(),
      accountType: userStore.tenantId,
      type: scopeFilter,
      cycle: timeFilter,
      account
    });
    if (res.data) {
      item.tableData = res.data.map((item: any, index: number) => {
        // 为第一个员工添加头像信息
        const employeeAvatar = index === 0 ? item.url : null;
        const employeeName = index === 0 ? item.name : null;

        return {
          name: item.name,
          value: item.number + '人',
          avatars: item.customerListMaps.map((customer: any) => customer.customerUrl),
          avatarNames: item.customerListMaps.map((customer: any) => customer.customerName),
          employeeAvatar,
          employeeName
        };
      });
    }
  } catch (error) {
    console.error('获取积极拓展榜失败:', error);
  } finally {
    item.loading = false;
  }
};

// 获取所有数据
const fetchAllData = async () => {
  const timeFilter = chartItems.value[0].timeFilter;
  const scopeFilter = chartItems.value[0].scopeFilter;

  await Promise.all([
    fetchCustomerAdditionTrend(timeFilter, scopeFilter),
    fetchMessagesAdditionTrend(timeFilter, scopeFilter),
    fetchMessagesConsultationTop(timeFilter, scopeFilter),
    fetchLabelConsultationTop(),
    fetchMessagesAddTop(timeFilter, scopeFilter),
    fetchCustomerAddTop(timeFilter, scopeFilter)
  ]);
};

// 监听筛选条件变化
const handleFilterChange = async (item: ChartItem) => {
  // 使用 nextTick 确保视图更新
  await nextTick();

  switch (item.title) {
    case '客户新增趋势':
      await fetchCustomerAdditionTrend(item.timeFilter, item.scopeFilter);
      break;
    case '会话热度趋势':
      await fetchMessagesAdditionTrend(item.timeFilter, item.scopeFilter);
      break;
    case '客户咨询榜':
      await fetchMessagesConsultationTop(item.timeFilter, item.scopeFilter);
      break;
    case '热情联络榜':
      await fetchMessagesAddTop(item.timeFilter, item.scopeFilter);
      break;
    case '积极拓展榜':
      await fetchCustomerAddTop(item.timeFilter, item.scopeFilter);
      break;
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchAllData();
  // 每分钟更新一次时间
  timer = setInterval(() => {
    currentTime.value = new Date().toLocaleString();
  }, 60000);
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

// 刷新数据
const refreshData = async () => {
  currentTime.value = new Date().toLocaleString();
  await fetchAllData();
};
</script>

<style scoped lang="scss">
.dashboard {
  padding: 16px;
  background-color: #f6f8fa;
  min-height: 100vh;

  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 0 8px;

    .header-left {
      .header-title {
        display: flex;
        align-items: center;
        gap: 16px;

        h2 {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          color: #1a1a1a;
          position: relative;
          padding-left: 12px;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 18px;
            background: linear-gradient(to bottom, #409eff, #67c23a);
            border-radius: 2px;
          }
        }

        .update-time {
          font-size: 13px;
          color: #909399;
        }
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;

      .el-button {
        box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
        }
      }
    }
  }

  .chart-item {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 400px;
    display: flex;
    flex-direction: column;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    &.loading::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(4px);
      z-index: 1;
    }

    &.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid #409eff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 2;
    }

    &.ranking-item {
      // min-height: 480px;
      display: flex;
      flex-direction: column;

      .chart-header {
        margin-bottom: 16px;
      }

      :deep(.el-table) {
        height: 100%;

        .el-table__inner-wrapper {
          height: 100%;
        }

        .el-table__body {
          height: 100%;
        }
      }
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .chart-filters {
        display: flex;
        align-items: center;
        gap: 10px;

        .el-select {
          .el-input__wrapper {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
          }
        }

        .el-icon {
          color: #909399;
          cursor: pointer;
          transition: all 0.3s;
          margin-left: 8px;
          font-size: 16px;

          &:hover {
            color: #409eff;
            transform: scale(1.1);
          }
        }
      }
    }

    .chart {
      flex: 1;
      min-height: 280px;
    }
  }
}

.rank-number {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background-color: #f5f7fa;
  color: #909399;
  font-weight: 600;
  margin: 0 auto;
  transition: all 0.3s ease;

  &.rank-first {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  }

  &.rank-second {
    background: linear-gradient(135deg, #e8e8e8, #c0c0c0);
    color: #fff;
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
  }

  &.rank-third {
    background: linear-gradient(135deg, #e6b800, #d4af37);
    color: #fff;
    box-shadow: 0 2px 8px rgba(230, 184, 0, 0.3);
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 5px;

  .employee-info {
    display: flex;
    align-items: center;
    gap: 12px;

    .employee-avatar {
      .employee-avatar-item {
        border: 2px solid #409eff;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
        }
      }
    }
  }
  .avatar-group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;

    &.avatar-group-stacked {
      flex-wrap: wrap;
      gap: 0;
      row-gap: 8px;

      .avatar-wrapper {
        margin-left: -10px;
        width: auto;

        &:first-child {
          margin-left: 0;
        }

        .avatar-item {
          border: 2px solid #fff;
        }
      }
      // 超过10个时不显示名字
      .avatar-name {
        display: none;
      }
    }

    // 仅未压缩时设置固定宽度
    .avatar-wrapper {
      width: 40px;
      flex-direction: column;
      align-items: center;
      display: flex;
      gap: 4px;
    }

    .avatar-item {
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
      }
    }

    .avatar-name {
      font-size: 12px;
      color: #606266;
      max-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
  }

  .user-name {
    width: 80px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
  }
}

.score {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  text-shadow: 0 1px 2px rgba(64, 158, 255, 0.1);
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

// 响应式布局调整
@media screen and (max-width: 768px) {
  .dashboard {
    padding: 12px;

    .dashboard-header {
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 24px;

      h2 {
        font-size: 24px;
      }
    }

    .chart-item {
      padding: 12px;
      height: 320px;

      .chart {
        min-height: 240px;
      }
    }
  }
}

.filter-tabs {
  display: flex;
  gap: 12px;
  align-items: center;

  .time-tabs,
  .scope-tabs {
    display: flex;
    background: #f5f7fa;
    border-radius: 6px;
    padding: 2px;
    gap: 2px;

    .tab-item {
      padding: 4px 12px;
      font-size: 13px;
      color: #606266;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        color: #409eff;
      }

      &.active {
        background: #fff;
        color: #409eff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      }
    }
  }
}

.table-container {
  height: 320px;
  overflow: hidden;
}

.ranking-table {
  :deep(.el-table__body-wrapper) {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #dcdfe6;
      border-radius: 3px;
      &:hover {
        background-color: #c0c4cc;
      }
    }
    &::-webkit-scrollbar-track {
      background-color: #f5f7fa;
      border-radius: 3px;
    }
  }

  :deep(.el-table__row) {
    height: 48px;
  }

  &.loading {
    :deep(.el-table__body-wrapper) {
      filter: blur(4px);
      pointer-events: none;
    }
  }
}

.chart-item {
  &.ranking-item {
    .chart-header {
      margin-bottom: 16px;
    }
  }
}

// 修改 el-row 的间距
:deep(.el-row) {
  margin: 0 -8px !important;
}

:deep(.el-col) {
  padding: 0 8px !important;
}
</style>
